let uiEngine = marbleRaceUIEngine

function createTeamRanklist(ranklist, ranklistTitle, infoList, maxDisplay) {
	if (m < maxDisplay) maxDisplay = m
	function update(infoID) {
		let info = infoList[infoID]
		ranklist.innerHTML = ''
		ranklistTitle.innerHTML = 'Marble Race #' + (infoID + 1).toString()

		let ranklistItems = new Array(maxDisplay)
		for (let i = 0; i < maxDisplay; ++i) {
			let rank = info[i].rank
			let delta = info[i].delta
			let id = info[i].id
			let score = info[i].score

			let item = document.createElement('div')
			item.style.margin = '10px'
			item.style.padding = '8px'
			item.style.width = '90%'
			item.style.backgroundColor = marbleRaceConfig.theme.tertiary

			let itemRank = document.createElement('div')
			itemRank.style.display = 'inline-flex'
			itemRank.style.justifyContent = 'center'
			itemRank.style.width = '20%'
			itemRank.innerHTML = rank.toString()
			item.appendChild(itemRank)

			let itemRankIncrement = document.createElement('div')
			itemRankIncrement.style.display = 'inline-flex'
			itemRankIncrement.style.justifyContent = 'center'
			itemRankIncrement.style.width = '20%'
			if (delta === undefined) {
				itemRankIncrement.className = 'rankunknown'
				itemRankIncrement.innerHTML = ''
			} else {
				if (delta) {
					if (delta > 0) {
						itemRankIncrement.className = 'rankup'
						itemRankIncrement.innerHTML = delta.toString()
					} else {
						itemRankIncrement.className = 'rankdown'
						itemRankIncrement.innerHTML = (-delta).toString()
					}
				} else {
					itemRankIncrement.className = 'rankunchanged'
					itemRankIncrement.innerHTML = ''
				}
			}
			item.appendChild(itemRankIncrement)

			let itemTeam = document.createElement('div')
			itemTeam.style.display = 'inline-flex'
			itemTeam.style.justifyContent = 'center'
			itemTeam.style.width = '20%'
			itemTeam.innerHTML = teams[id].name
			itemTeam.className = 'colored'
			itemTeam.setAttribute('text', 1)
			for (let j = 0; j < n; ++j)
				if (colors[j].isCaptain && colors[j].team == id) {
					itemTeam.setAttribute('color', j)
					break
				}
			item.appendChild(itemTeam)

			let itemTeamMember = document.createElement('div')
			itemTeamMember.style.display = 'inline-flex'
			itemTeamMember.style.justifyContent = 'center'
			itemTeamMember.style.width = '20%'
			for (let j = 0; j < n; ++j)
				if (colors[j].team == id) {
					let memberElement = document.createElement('div')
					memberElement.style.width = '20px'
					memberElement.style.height = '20px'
					memberElement.style.borderRadius = '50%'
					memberElement.className = 'colored'
					memberElement.setAttribute('color', j)
					itemTeamMember.appendChild(memberElement)
				}
			item.appendChild(itemTeamMember)

			let itemScore = document.createElement('div')
			itemScore.style.display = 'inline-flex'
			itemScore.style.justifyContent = 'center'
			itemScore.style.width = '20%'
			itemScore.innerHTML = score.toString()
			item.appendChild(itemScore)

			ranklist.appendChild(item)
			ranklistItems[i] = item
		}
	}
	let current = 0
	update(0)
	function nextInfo() {
		if (current < r - 1)
			update(++current)
		else clearInterval(interval)
	}
	let interval = setInterval(nextInfo, marbleRaceConfig.nextPageIntervalForTotal)
}

function createColorRanklist(ranklist, ranklistTitle, infoList, maxDisplay) {
	if (n < maxDisplay) maxDisplay = n
	function update(infoID) {
		let info = infoList[infoID]
		ranklist.innerHTML = ''
		ranklistTitle.innerHTML = 'Marble Race #' + (infoID + 1).toString()

		let ranklistItems = new Array(maxDisplay)
		for (let i = 0; i < maxDisplay; ++i) {
			let rank = info[i].rank
			let delta = info[i].delta
			let id = info[i].id
			let score = info[i].score

			let item = document.createElement('div')
			item.style.margin = '10px'
			item.style.padding = '8px'
			item.style.width = '90%'
			item.style.backgroundColor = marbleRaceConfig.theme.tertiary

			let itemRank = document.createElement('div')
			itemRank.style.display = 'inline-flex'
			itemRank.style.justifyContent = 'center'
			itemRank.style.width = '20%'
			itemRank.innerHTML = rank.toString()
			item.appendChild(itemRank)

			let itemRankIncrement = document.createElement('div')
			itemRankIncrement.style.display = 'inline-flex'
			itemRankIncrement.style.justifyContent = 'center'
			itemRankIncrement.style.width = '20%'
			if (delta === undefined) {
				itemRankIncrement.className = 'rankunknown'
				itemRankIncrement.innerHTML = ''
			} else {
				if (delta) {
					if (delta > 0) {
						itemRankIncrement.className = 'rankup'
						itemRankIncrement.innerHTML = delta.toString()
					} else {
						itemRankIncrement.className = 'rankdown'
						itemRankIncrement.innerHTML = (-delta).toString()
					}
				} else {
					itemRankIncrement.className = 'rankunchanged'
					itemRankIncrement.innerHTML = ''
				}
			}
			item.appendChild(itemRankIncrement)

			let itemColor = document.createElement('div')
			itemColor.style.display = 'inline-flex'
			itemColor.style.justifyContent = 'center'
			itemColor.style.width = '20%'
			itemColor.innerHTML = colors[id].name
			itemColor.className = 'colored'
			itemColor.setAttribute('text', 1)
			itemColor.setAttribute('color', id)
			item.appendChild(itemColor)

			let itemColorMember = document.createElement('div')
			itemColorMember.style.display = 'inline-flex'
			itemColorMember.style.justifyContent = 'center'
			itemColorMember.style.width = '20%'

			let memberElement = document.createElement('div')
			memberElement.style.width = '20px'
			memberElement.style.height = '20px'
			memberElement.style.borderRadius = '50%'
			memberElement.className = 'colored'
			memberElement.setAttribute('color', id)
			itemColorMember.appendChild(memberElement)

			item.appendChild(itemColorMember)

			let itemScore = document.createElement('div')
			itemScore.style.display = 'inline-flex'
			itemScore.style.justifyContent = 'center'
			itemScore.style.width = '20%'
			itemScore.innerHTML = score.toString()
			item.appendChild(itemScore)

			ranklist.appendChild(item)
			ranklistItems[i] = item
		}
	}
	let current = 0
	update(0)
	function nextInfo() {
		if (current < r - 1)
			update(++current)
		else clearInterval(interval)
	}
	let interval = setInterval(nextInfo, marbleRaceConfig.nextPageIntervalForTotal)
}

let pageConfig = {
	teamTotal: {
		init: function () {
			createTeamRanklist(document.getElementById('teamTotalRanklist'), document.getElementById('teamTotalRanklistTitle'), teamTotal, marbleRaceConfig.ranklistMaxDisplay)
		}
	},
	colorTotal: {
		init: function () {
			createColorRanklist(document.getElementById('colorTotalRanklist'), document.getElementById('colorTotalRanklistTitle'), colorTotal, marbleRaceConfig.ranklistMaxDisplay)
		}
	}
}